<template>
  <div class="container-fluild long-container">
    <!-- 回到顶部 -->
    <div class="toTop" @click="toTop">
      <svg t="1659602860431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3763" width="20" height="20">
        <path
          d="M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z"
          p-id="3764" fill="#ffffff"></path>
      </svg>
    </div>
    <div class="container">
      <div class="row long-row">
        <div class="col-md-5 contact">
          <h3>
            <svg t="1649321039266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="9728" width="22" height="22">
              <path
                d="M511.449009 213.858462a179.278769 179.278769 0 1 1 0 358.557538 179.278769 179.278769 0 0 1 0-358.557538z m393.294769 179.357538A393.294769 393.294769 0 1 0 182.036086 608.098462l294.203077 392.270769a39.384615 39.384615 0 0 0 70.498462 0l294.754461-392.270769c39.699692-61.912615 63.251692-135.483077 63.251692-214.882462z"
                p-id="9729" fill="#ffffff"></path>
            </svg>
            联系
          </h3>
          <p>
            上海市闵行区春东路508号IF如果创意产业园A栋7层<br />
            电话：15800616566
          </p>
          <img src="./images/QRcode.png" alt="二维码" />
        </div>
        <div class="col-md-4 navigation">
          <h3>
            <svg t="1649322292493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="17869" width="22" height="22">
              <path
                d="M1000.533333 0c-4.266667 0-8.533333 0-10.666666 2.133333L12.8 531.2c-21.333333 12.8-12.8 44.8 10.666667 44.8h401.066666c12.8 0 23.466667 10.666667 23.466667 23.466667v401.066666c0 14.933333 12.8 23.466667 23.466667 23.466667 8.533333 0 14.933333-4.266667 21.333333-12.8L1021.866667 34.133333c8.533333-17.066667-4.266667-34.133333-21.333334-34.133333z"
                fill="#ffffff" p-id="17870"></path>
            </svg>
            导航
          </h3>
          <p>
            <router-link to="/home">首 页 (Home)</router-link>
          </p>
          <p>
            <router-link to="/product">产品中心 (Product)</router-link>
          </p>
          <p>
            <router-link to="/news">新闻动态 (News)</router-link>
          </p>
          <p>
            <router-link to="/about">关于昨非 (About)</router-link>
          </p>
          <p>
            <router-link to="/contact">联系我们 (Contact)</router-link>
          </p>
        </div>
        <div class="col-md-3">
          <h3>
            <svg t="1649322884249" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="22869" width="22" height="22">
              <path
                d="M1024.549 360.609c0-170.492-133.815-309.265-298.055-309.265-81.129 0-157.91 34.998-213.344 94.701-55.509-59.702-132.367-94.701-213.344-94.701C135.49 51.344 1.751 190.041 1.751 360.609c0 5.719 0.534 10.827 0.991 15.021-0.076 1.373-0.152 2.745-0.152 4.194 0 30.193 7.319 63.361 21.73 98.59 0.458 1.295 0.915 2.516 1.449 3.657 90.812 217.844 440.412 468.474 455.279 479.985 9.227 7.092 20.205 10.6 31.263 10.6 11.209 0 22.266-3.659 31.566-10.903 12.733-9.911 310.941-224.551 429.279-427.603 4.498-6.861 7.854-13.494 10.828-19.215 0.914-1.829 1.753-3.658 2.744-5.413l0.382-0.839c0.382-0.686 0.839-1.449 1.296-2.059 7.091-13.802 12.732-26.611 17.232-39.116 12.274-32.177 18.3-60.847 18.3-87.61 0-2.058-0.077-3.888-0.229-5.414C1024.093 370.979 1024.549 366.251 1024.549 360.609z"
                p-id="22870" fill="#ffffff"></path>
            </svg>
            社交
          </h3>
          <div class="social">
            <a>
              <svg @mouseenter="showQR('douyin')" @mouseleave="hiddenQR" t="1661502340966" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="22"
                height="32">
                <path
                  d="M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6 17.1 0 33.7 1.5 49.9 4.3v186.6c-15.5-6.1-32-9.2-48.6-9.2-76.3 0-138.2 65-138.2 145.3 0 80.2 61.9 145.3 138.2 145.3 76.2 0 138.1-65.1 138.1-145.3V0H707c0 134.5 103.7 243.5 231.6 243.5v180.3l-1.2 0.1"
                  p-id="1900" fill="#ffffff"></path>
              </svg>
              <transition name="douyin" appear class="animate__animated" enter-active-class="animate__fadeIn"
                leave-active-class="animate__zoomOut">
                <div class="douyin" v-show="isShowDouYin">
                  <img src="./images/douyin.png" alt="抖音二维码">
                </div>
              </transition>
            </a>

            <a>
              <svg @mouseenter="showQR('weibo')" @mouseleave="hiddenQR" t="1649323825138" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27275" width="30"
                height="30">
                <path
                  d="M726.64 470.78c-34.78-6.72-17.845-25.088-17.845-25.088s34.023-55.406-6.805-95.73c-50.5-49.878-173.429 6.276-173.429 6.276-46.877 14.333-34.478-6.572-27.824-42.116 0-41.965-14.518-112.899-139.563-71.084-124.894 42.263-232.1 189.958-232.1 189.958-74.54 98.118-64.713 173.983-64.713 173.983 18.596 167.562 198.984 213.557 339.303 224.462C551.24 842.79 750.53 781.259 810.857 654.619c60.486-126.791-49.29-176.97-84.217-183.838zM414.55 784.249c-146.518 6.718-265.061-65.71-265.061-162.184 0-96.624 118.543-173.984 265.061-180.706 146.669-6.718 265.364 53.018 265.364 149.342 0 96.327-118.695 186.976-265.364 193.548zM385.367 504.83c-147.425 17.023-130.338 153.224-130.338 153.224s-1.51 43.16 39.467 65.114c86.183 46.145 175.093 18.216 219.849-38.98 44.907-57.047 18.6-196.235-128.978-179.358zM348.17 696.138c-27.516 3.135-49.743-12.547-49.743-35.248 0-22.55 19.654-46.296 47.173-49.13 31.604-2.99 52.167 14.934 52.167 37.782 0.151 22.55-22.228 43.46-49.597 46.596z m86.946-73.03c-9.377 6.87-20.866 5.975-25.707-2.388-5.141-8.067-3.175-20.91 6.2-27.628 10.886-8.067 22.228-5.674 27.217 2.388 4.841 8.067 1.36 20.458-7.71 27.628zM798.459 411.79c11.946 0 21.927-8.66 23.74-20.008 0.153-0.897 0.3-1.645 0.3-2.542 17.997-159.646-132.605-132.165-132.605-132.165-13.306 0-24.04 10.6-24.04 24.042 0 13.144 10.734 23.748 24.04 23.748 108.112-23.598 84.375 83.18 84.375 83.18-0.152 13.144 10.733 23.745 24.19 23.745z m-17.54-278.671c-52.013-12.096-105.693-1.64-120.662 1.195-1.21 0.15-2.266 1.198-3.323 1.344-0.457 0.151-0.908 0.597-0.908 0.597-14.818 4.185-25.555 17.624-25.555 33.603 0 18.968 15.573 34.646 35.078 34.646 0 0 18.9-2.538 31.756-7.466 12.699-5.076 120.657-3.732 174.185 84.976 29.186 64.813 12.856 108.123 10.737 115.141 0 0-6.954 16.877-6.954 33.452 0 19.115 15.574 31.215 35.078 31.215 16.18 0 29.786-2.243 33.718-29.273h0.152c57.761-189.215-70.16-278.072-163.302-299.43z m0 0"
                  p-id="27276" fill="#ffffff"></path>
              </svg>
              <transition name="weibo" appear class="animate__animated" enter-active-class="animate__fadeIn"
                leave-active-class="animate__zoomOut">
                <div class="weibo" v-show="isShowWeibo">
                  <img src="./images/weibo.png" alt="微博二维码">
                </div>
              </transition>
            </a>

            <a>
              <svg @mouseenter="showQR('bzhan')" @mouseleave="hiddenQR" t="1661503462347" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3263" width="28"
                height="30">
                <path
                  d="M306.005333 117.632L444.330667 256h135.296l138.368-138.325333a42.666667 42.666667 0 0 1 60.373333 60.373333L700.330667 256H789.333333A149.333333 149.333333 0 0 1 938.666667 405.333333v341.333334a149.333333 149.333333 0 0 1-149.333334 149.333333h-554.666666A149.333333 149.333333 0 0 1 85.333333 746.666667v-341.333334A149.333333 149.333333 0 0 1 234.666667 256h88.96L245.632 177.962667a42.666667 42.666667 0 0 1 60.373333-60.373334zM789.333333 341.333333h-554.666666a64 64 0 0 0-63.701334 57.856L170.666667 405.333333v341.333334a64 64 0 0 0 57.856 63.701333L234.666667 810.666667h554.666666a64 64 0 0 0 63.701334-57.856L853.333333 746.666667v-341.333334A64 64 0 0 0 789.333333 341.333333zM341.333333 469.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666666-42.666667z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z"
                  p-id="3264" fill="#ffffff"></path>
              </svg>
              <transition name="bzhan" appear class="animate__animated" enter-active-class="animate__fadeIn"
                leave-active-class="animate__zoomOut">
                <div class="bzhan" v-show="isShowBzhan">
                  <img src="./images/bzhan.png" alt="B站二维码">
                </div>
              </transition>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluild long-container-bootom text-center">
      <!-- <img src="./images/police.png" alt="备案号" /> -->
      <span>© 上海昨非实验室设备有限公司 </span>
      <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">
        沪ICP备20016804号-4
      </a>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    name: "Footer",
    setup() {
      let isShowDouYin = ref(false) //是否展示抖音二维码
      let isShowWeibo = ref(false) //是否展示微博二维码
      let isShowBzhan = ref(false) //是否展示B站二维码
      //鼠标移入展示微信二维码
      function showQR(id) {
        if (id == "douyin") {
          isShowDouYin.value = true
        } else if (id == "weibo") {
          isShowWeibo.value = true
        } else {
          isShowBzhan.value = true
        }

      }
      //鼠标离开隐藏微信二维码
      function hiddenQR() {
        isShowDouYin.value = false
        isShowWeibo.value = false
        isShowBzhan.value = false
      }
      //回到顶部
      function toTop() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
      return {
        isShowDouYin,
        isShowWeibo,
        isShowBzhan,
        showQR,
        hiddenQR,
        toTop
      }
    }

  };
</script>

<style scoped>
  .long-container {
    position: relative;
    background-color: #4F68AC;
  }

  /* 回到顶部按钮 */
  .long-container .toTop {
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-color: #4F68AC;
    border: 3px solid #fff;
    border-radius: 50%;
    transition: background-color 0.2s linear;
    cursor: pointer;
    padding-top: 5px;
    padding-left: 7px;
  }

  .long-container .toTop:hover {
    background-color: #2e4174;
  }

  .long-container .long-row {

    margin: 20px 0 30px 10px;
    font-family: "Source Han Sans CN";
    font-size: 16px;
    color: #ffffff;
    font-weight: 300;
  }

  .long-container .long-row h3 {
    font-size: 24px;
    margin-bottom: 20px;
    margin-top: 40px;
  }

  .long-container .long-row .contact p {
    line-height: 30px;
    margin-bottom: 32px;
  }

  .long-container .long-row .navigation a {
    text-decoration: none;
    color: #fff;
    line-height: 36px;
    transition: all 0.2s linear;
  }

  .long-container .long-row .navigation a:hover {
    color: rgba(255, 255, 255, 0.30);
  }

  .long-container .long-row .social a {
    margin-right: 20px;
    cursor: pointer;
  }

  .long-container-bootom {
    background-color: #4F68AC;
    padding: 16px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.071);
  }

  .long-container-bootom a,
  span {
    font-family: "Source Han Sans CN";
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    display: inline-block;
    margin: 3px 0 0 8px;
    text-decoration: none;
    transition: all 0.2s linear;
  }

  .long-container-bootom a:hover {
    color: rgba(255, 255, 255, 0.30);
  }

  .douyin {
    position: absolute;
    left: -42px;
    z-index: 9999;
    width: 140px;
    height: 150px;
  }

  .weibo {
    position: absolute;
    left: 2px;
    z-index: 9999;
    width: 140px;
    height: 150px;
  }

  .bzhan {
    position: absolute;
    left: 53px;
    z-index: 9999;
    width: 140px;
    height: 150px;
  }

  .douyin img,
  .weibo img,
  .bzhan img {
    height: 100%;
    width: 100%;
  }

  /* banner  END */

  /* 设置响应式 */
  /* 移动端 */
  @media (max-width: 768px) {
    .douyin {
      position: absolute;
      left: -20px;
      z-index: 9999;
      width: 90px;
      height: 100px;
    }

    .weibo {
      position: absolute;
      left: 26px;
      z-index: 9999;
      width: 90px;
      height: 100px;
    }

    .bzhan {
      position: absolute;
      left: 77px;
      z-index: 9999;
      width: 90px;
      height: 100px;
    }
  }
</style>